<template>
    <view class="current-order">
      <!-- 订单进度卡片 -->
      <view v-if="order" class="progress-card">
        <view class="progress-header">
          <view class="progress-title">
            <uni-icons type="flag" size="20" color="#999999"></uni-icons>
            <text class="progress-title-text">订单进度</text>
          </view>
          <view class="progress-status" :class="getStatusColorClass(order.status)">{{ getProgressStatus(order.status) }}</view>
        </view>
        <view class="progress-order-number">订单号: {{ order.orderNumber }}</view>
        
        <view class="progress-steps">
          <view class="progress-step" :class="{ 'active': isStepActive('待支付', order.status), 'completed': isStepCompleted('待支付', order.status) }">
            <view class="step-icon">
              <uni-icons v-if="isStepCompleted('待支付', order.status)" type="checkmarkempty" size="24" color="#3db87f"></uni-icons>
              <text v-else>1</text>
            </view>
            <view class="step-line"></view>
            <view class="step-text">待支付</view>
          </view>
          
          <view class="progress-step" :class="{ 'active': isStepActive('已支付', order.status), 'completed': isStepCompleted('已支付', order.status) }">
            <view class="step-icon">
              <uni-icons v-if="isStepCompleted('已支付', order.status)" type="checkmarkempty" size="24" color="#3db87f"></uni-icons>
              <text v-else>2</text>
            </view>
            <view class="step-line"></view>
            <view class="step-text">已支付</view>
          </view>
          
          <view class="progress-step" :class="{ 'active': isStepActive('已接单', order.status), 'completed': isStepCompleted('已接单', order.status) }">
            <view class="step-icon">
              <uni-icons v-if="isStepCompleted('已接单', order.status)" type="checkmarkempty" size="24" color="#3db87f"></uni-icons>
              <text v-else>3</text>
            </view>
            <view class="step-line"></view>
            <view class="step-text">已接单</view>
          </view>
          
          <view class="progress-step" :class="{ 'active': isStepActive('准备中', order.status), 'completed': isStepCompleted('准备中', order.status) }">
            <view class="step-icon">
              <uni-icons v-if="isStepCompleted('准备中', order.status)" type="checkmarkempty" size="24" color="#3db87f"></uni-icons>
              <text v-else>4</text>
            </view>
            <view class="step-line"></view>
            <view class="step-text">准备中</view>
          </view>
          
          <view class="progress-step" :class="{ 'active': isStepActive('已完成', order.status), 'completed': isStepCompleted('已完成', order.status) }">
            <view class="step-icon">
              <uni-icons v-if="isStepCompleted('已完成', order.status)" type="checkmarkempty" size="24" color="#3db87f"></uni-icons>
              <text v-else>5</text>
            </view>
            <view class="step-text">已完成</view>
          </view>
        </view>
        
        <view class="progress-info">
          <view class="progress-info-item">
            <text class="info-label">预计等待时间</text>
            <text class="info-value">约30分钟</text>
          </view>
          <view class="progress-info-item">
            <text class="info-label">桌号</text>
            <text class="info-value">8号桌</text>
          </view>
        </view>
      </view>
      
      <!-- 订单卡片 -->
      <view v-if="order" class="order-card" @tap="showOrderDetail(order)">
        <view class="order-header">
          <view class="order-title">
            <uni-icons type="cart" size="20" color="#999999"></uni-icons>
            <text class="order-title-text">订单内容</text>
          </view>
        </view>
        
        <view class="order-content">
          <!-- 垂直排列所有菜品 -->
          <view class="order-dishes-list">
            <view class="order-dish-item" v-for="(dish, dishIndex) in order.dishes" :key="dishIndex">
              <image :src="dish.image" mode="aspectFill" class="dish-image"></image>
              <view class="dish-info">
                <view class="dish-name-count">
                  <text class="dish-name">{{ dish.name }}</text>
                  <text class="dish-count">x{{ dish.quantity }}</text>
                </view>
                <view class="dish-price">¥{{ dish.price }}</view>
              </view>
            </view>
          </view>
          
          <!-- 优惠券选择 -->
          <view class="order-coupon" @tap="openCouponPopup">
            <view class="coupon-label">优惠券</view>
            <view class="coupon-value">
              <text>{{ selectedCoupon ? selectedCoupon.name : '未使用' }}</text>
              <uni-icons type="right" size="16" color="#999999"></uni-icons>
            </view>
          </view>
          
          <view class="order-footer">
            <view class="order-time">{{ order.orderTime }}</view>
            <view class="order-price">¥{{ finalPrice }}</view>
          </view>
          
          <view class="order-actions">
            <view class="order-remark" v-if="order.remark">
              <text class="remark-label">备注:</text>
              <text class="remark-content">{{ order.remark }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 备注卡片 -->
      <view v-if="order" class="remark-card">
        <view class="remark-card-header">
          <uni-icons type="compose" size="20" color="#999999"></uni-icons>
          <text class="remark-card-title">备注</text>
        </view>
        <textarea 
          class="remark-input" 
          placeholder="请输入特殊要求（口味、偏好等）" 
          v-model="remarkText"
          @blur="updateRemark"
        ></textarea>
      </view>
      
      <!-- 支付方式卡片 -->
      <view v-if="order" class="payment-method-card" @tap="openPaymentPopup">
        <view class="payment-method-header">
          <view class="payment-method-title">
            <uni-icons type="wallet" size="20" color="#999999"></uni-icons>
            <text class="payment-method-text">支付方式</text>
          </view>
          <view class="payment-method-selected">
            <text>{{ paymentMethods[selectedPaymentMethod].name }}</text>
            <uni-icons type="right" size="16" color="#999999"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 底部支付按钮 -->
      <view v-if="order" class="payment-bar">
        <view class="payment-info">
          <text class="payment-total">合计: ¥{{ finalPrice }}</text>
        </view>
        <view class="payment-action" @tap="payOrder(order)">
          <text>立即支付</text>
        </view>
      </view>
      
      <!-- 支付方式选择弹窗 -->
      <uni-popup ref="paymentPopupRef" type="bottom" :safe-area="false">
        <view class="payment-popup">
          <view class="payment-popup-header">
            <text class="payment-popup-title">选择支付方式</text>
            <uni-icons type="close" size="24" color="#666666" @click="closePaymentPopup"></uni-icons>
          </view>
          <view class="payment-methods-list">
            <view 
              class="payment-method-item" 
              v-for="(method, index) in paymentMethods" 
              :key="index"
              :class="{ active: selectedPaymentMethod === index }"
              @tap="selectAndConfirmPaymentMethod(index)"
            >
              <view class="payment-method-info">
                <text class="payment-method-name">{{ method.name }}</text>
              </view>
              <uni-icons v-if="selectedPaymentMethod === index" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
            </view>
          </view>
        </view>
      </uni-popup>
  
      <!-- 优惠券选择弹窗 -->
      <uni-popup ref="couponPopupRef" type="bottom" :safe-area="false">
        <view class="payment-popup">
          <view class="payment-popup-header">
            <text class="payment-popup-title">选择优惠券</text>
            <uni-icons type="close" size="24" color="#666666" @click="closeCouponPopup"></uni-icons>
          </view>
          <view class="payment-methods-list">
            <view 
              class="payment-method-item" 
              :class="{ active: selectedCouponIndex === -1 }"
              @tap="selectAndConfirmCoupon(-1)"
            >
              <view class="payment-method-info">
                <text class="payment-method-name">不使用优惠券</text>
              </view>
              <uni-icons v-if="selectedCouponIndex === -1" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
            </view>
            <view 
              class="payment-method-item" 
              v-for="(coupon, index) in coupons" 
              :key="index"
              :class="{ active: selectedCouponIndex === index }"
              @tap="selectAndConfirmCoupon(index)"
            >
              <view class="payment-method-info">
                <text class="payment-method-name">{{ coupon.name }}</text>
              </view>
              <uni-icons v-if="selectedCouponIndex === index" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
            </view>
          </view>
        </view>
      </uni-popup>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, watch, defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    order: {
      type: Object as () => Order | null,
      default: null
    }
  });
  
  const emit = defineEmits(['update:order', 'showDetail']);
  
  // 备注文本
  const remarkText = ref('');
  // 支付方式弹窗引用
  const paymentPopupRef = ref<any>(null);
  // 选中的支付方式
  const selectedPaymentMethod = ref(0);
  // 支付方式列表
  const paymentMethods = [
    {
      name: '微信支付',
      icon: 'https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/38148bf503e7494cbf4a4e1c4115bc03.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850697&x-signature=ciyEP%2BdtyeM2IO6dhTfJUdxboyw%3D'
    },
    {
      name: '支付宝支付',
      icon: 'https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/31e44832a9c645df913ec4299773a51a.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850158&x-signature=J52YknSQKiBo2bPtj6kedWUQkK8%3D'
    }
  ];
  
  // 优惠券弹窗引用
  const couponPopupRef = ref<any>(null);
  // 选中的优惠券索引
  const selectedCouponIndex = ref(-1); // -1 表示不使用优惠券
  // 优惠券列表
  const coupons = [
    {
      id: 1,
      name: '满100减10元',
      discount: 10,
      minAmount: 100
    },
    {
      id: 2,
      name: '满200减30元',
      discount: 30,
      minAmount: 200
    },
    {
      id: 3,
      name: '满300减50元',
      discount: 50,
      minAmount: 300
    }
  ];
  
  // 选中的优惠券
  const selectedCoupon = computed(() => {
    if (selectedCouponIndex.value === -1) {
      return null;
    }
    return coupons[selectedCouponIndex.value];
  });
  
  // 计算最终价格（应用优惠券后）
  const finalPrice = computed(() => {
    if (!props.order) return 0;
    
    // 确保价格是数字类型
    const originalPrice = typeof props.order.totalPrice === 'string' 
      ? parseFloat(props.order.totalPrice) 
      : props.order.totalPrice;
    
    if (!selectedCoupon.value) return originalPrice.toFixed(2);
    
    // 检查是否满足优惠券使用条件
    if (originalPrice >= selectedCoupon.value.minAmount) {
      return (originalPrice - selectedCoupon.value.discount).toFixed(2);
    }
    
    return originalPrice.toFixed(2);
  });
  
  // 初始化备注文本
  watch(() => props.order, (newOrder) => {
    if (newOrder) {
      remarkText.value = newOrder.remark || '';
    }
  }, { immediate: true });
  
  // 获取进度状态文本
  const getProgressStatus = (status: string) => {
    switch (status) {
      case '待支付':
        return '待支付';
      case '已支付':
        return '进行中';
      case '已接单':
        return '进行中';
      case '准备中':
        return '进行中';
      case '已完成':
        return '已完成';
      default:
        return '进行中';
    }
  };
  
  // 获取状态颜色类
  const getStatusColorClass = (status: string) => {
    const progressStatus = getProgressStatus(status);
    switch (progressStatus) {
      case '待支付':
        return 'status-pending';
      case '进行中':
        return 'status-processing';
      case '已完成':
        return 'status-completed';
      default:
        return 'status-processing';
    }
  };
  
  // 判断步骤是否激活
  const isStepActive = (step: string, currentStatus: string) => {
    const statusOrder = ['待支付', '已支付', '已接单', '准备中', '已完成'];
    const stepIndex = statusOrder.indexOf(step);
    const currentIndex = statusOrder.indexOf(currentStatus);
    
    return stepIndex === currentIndex;
  };
  
  // 判断步骤是否已完成
  const isStepCompleted = (step: string, currentStatus: string) => {
    const statusOrder = ['待支付', '已支付', '已接单', '准备中', '已完成'];
    const stepIndex = statusOrder.indexOf(step);
    const currentIndex = statusOrder.indexOf(currentStatus);
    
    return stepIndex < currentIndex;
  };
  
  // 更新备注
  const updateRemark = () => {
    if (props.order) {
      const updatedOrder = { ...props.order, remark: remarkText.value };
      emit('update:order', updatedOrder);
      
      // 更新本地存储
      const orders = uni.getStorageSync('orders') || [];
      const index = orders.findIndex((o: any) => o.orderNumber === props.order?.orderNumber);
      if (index !== -1) {
        orders[index].remark = remarkText.value;
        uni.setStorageSync('orders', orders);
      }
    }
  };
  
  // 打开支付方式选择弹窗
  const openPaymentPopup = () => {
    paymentPopupRef.value.open();
  };
  
  // 关闭支付方式选择弹窗
  const closePaymentPopup = () => {
    paymentPopupRef.value.close();
  };
  
  // 选择并确认支付方式
  const selectAndConfirmPaymentMethod = (index: number) => {
    selectedPaymentMethod.value = index;
    closePaymentPopup();
  };
  
  // 打开优惠券选择弹窗
  const openCouponPopup = () => {
    couponPopupRef.value.open();
  };
  
  // 关闭优惠券选择弹窗
  const closeCouponPopup = () => {
    couponPopupRef.value.close();
  };
  
  // 选择并确认优惠券
  const selectAndConfirmCoupon = (index: number) => {
    selectedCouponIndex.value = index;
    
    // 更新订单显示的价格（仅用于显示，不修改原始价格）
    if (props.order) {
      const updatedOrder = { ...props.order, selectedCouponIndex: index };
      emit('update:order', updatedOrder);
      
      // 保存选择的优惠券到订单中
      const orders = uni.getStorageSync('orders') || [];
      const orderIndex = orders.findIndex((o: any) => o.orderNumber === props.order?.orderNumber);
      if (orderIndex !== -1) {
        orders[orderIndex].selectedCouponIndex = index;
        uni.setStorageSync('orders', orders);
      }
    }
    
    closeCouponPopup();
  };
  
  // 支付订单
  const payOrder = (order: any) => {
    uni.showLoading({
      title: '正在支付'
    });
    
    // 模拟支付过程
    setTimeout(() => {
      uni.hideLoading();
      
      // 更新订单状态
      const orders = uni.getStorageSync('orders') || [];
      const index = orders.findIndex((o: any) => o.orderNumber === order.orderNumber);
      if (index !== -1) {
        orders[index].status = '已支付';
        
        // 更新本地存储
        uni.setStorageSync('orders', orders);
        
        // 支付成功后清空购物车
        uni.setStorageSync('cartItems', []);
        
        // 通知父组件更新订单
        emit('update:order', { ...order, status: '已支付' });
      }
      
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      });
    }, 1500);
  };
  
  // 显示订单详情
  const showOrderDetail = (order: any) => {
    emit('showDetail', order);
  };
  
  // 定义订单类型接口
  interface Order {
    orderNumber: string;
    status: string;
    dishes: Array<{
      id: string | number;
      name: string;
      image: string;
      price: number;
      quantity: number;
    }>;
    totalPrice: number | string;
    orderTime: string;
    remark?: string;
    selectedCouponIndex?: number;
  }
  </script>
  
  <style lang="scss" scoped>
  .current-order {
    width: 100%;
    box-sizing: border-box;
    padding-top: 10rpx; /* 与全部订单对齐 */
  }
  
  /* 进度卡片样式 */
  .progress-card {
    background-color: #fff;
    margin-top: 10rpx; /* 微调顶部间距 */
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .progress-title {
    display: flex;
    align-items: center;
  }
  
  .progress-title-text {
    font-size: 28rpx;
    color: #666;
    margin-left: 8rpx;
  }
  
  .progress-status {
    font-size: 26rpx;
    color: #ffffff;
    padding: 4rpx 16rpx;
    border-radius: 100rpx;
  }
  
  .status-pending {
    background-color: #ff9800; /* 橙色 */
  }
  
  .status-processing {
    background-color: #2196f3; /* 蓝色 */
  }
  
  .status-completed {
    background-color: vars.$primary-color;
  }
  
  .progress-order-number {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    overflow-x: auto;
    padding-bottom: 10rpx;
  }
  
  .progress-step {
    min-width: 120rpx;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  
  .progress-step:last-child {
    margin-right: 0;
  }
  
  .step-icon {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;
    font-size: 24rpx;
    color: #999;
    z-index: 2;
  }
  
  .progress-step.active .step-icon {
    background-color: vars.$primary-color;
    color: #fff;
  }
  
  .progress-step.completed .step-icon {
    background-color: vars.$primary-color;
    color: #fff;
  }
  
  .step-line {
    position: absolute;
    top: 24rpx;
    left: 50%;
    width: 100%;
    height: 2rpx;
    background-color: #f5f5f5;
    z-index: 1;
  }
  
  .progress-step:first-child .step-line {
    left: 50%;
    width: 50%;
  }
  
  .progress-step:last-child .step-line {
    width: 50%;
    right: 50%;
    left: auto;
  }
  
  .progress-step.active .step-line,
  .progress-step.completed .step-line {
    background-color: vars.$primary-color;
  }
  
  .step-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .progress-step.active .step-text,
  .progress-step.completed .step-text {
    color: vars.$primary-color;
  }
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    border-top: 1px solid #f5f5f5;
  }
  
  .progress-info-item {
    display: flex;
    flex-direction: column;
  }
  
  .info-label {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  /* 订单卡片样式 */
  .order-card {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .order-title {
    display: flex;
    align-items: center;
  }
  
  .order-title-text {
    font-size: 28rpx;
    color: #666;
    margin-left: 8rpx;
  }
  
  .order-content {
    padding: 20rpx;
  }
  
  .order-dishes-list {
    margin-bottom: 20rpx;
  }
  
  .order-dish-item {
    display: flex;
    margin-bottom: 20rpx;
  }
  
  .order-dish-item:last-child {
    margin-bottom: 0;
  }
  
  .dish-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  .dish-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .dish-name-count {
    display: flex;
    justify-content: space-between;
  }
  
  .dish-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .dish-count {
    font-size: 26rpx;
    color: #999;
  }
  
  .dish-price {
    font-size: 28rpx;
    color: vars.$primary-color;
    font-weight: 500;
  }
  
  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f5f5f5;
  }
  
  .order-time {
    font-size: 24rpx;
    color: #999;
  }
  
  .order-price {
    font-size: 32rpx;
    color: vars.$primary-color;
    font-weight: 500;
  }
  
  .order-actions {
    margin-top: 20rpx;
  }
  
  .order-remark {
    font-size: 24rpx;
    color: #999;
  }
  
  .remark-label {
    margin-right: 10rpx;
  }
  
  /* 优惠券选择样式 */
  .order-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-top: 1px solid #f5f5f5;
    margin-bottom: 16rpx;
  }
  
  .coupon-label {
    font-size: 26rpx;
    color: #666;
  }
  
  .coupon-value {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: vars.$primary-color;
  }
  
  /* 备注卡片样式 */
  .remark-card {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .remark-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 16rpx;
  }
  
  .remark-card-title {
    font-size: 28rpx;
    color: #666;
    margin-left: 8rpx;
  }
  
  .remark-input {
    width: 100%;
    height: 120rpx;
    font-size: 26rpx;
    color: #333;
    background-color: transparent;
    border-radius: 8rpx;
    padding: 0;
    box-sizing: border-box;
    border: none;
  }
  
  /* 支付方式卡片样式 */
  .payment-method-card {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .payment-method-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .payment-method-title {
    display: flex;
    align-items: center;
  }
  
  .payment-method-text {
    font-size: 28rpx;
    color: #666;
    margin-left: 8rpx;
  }
  
  .payment-method-selected {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #999;
  }
  
  /* 支付方式弹窗样式 */
  .payment-popup {
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;
  }
  
  .payment-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  .payment-popup-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .payment-methods-list {
    margin-bottom: 20rpx;
  }
  
  .payment-method-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .payment-method-item:last-child {
    border-bottom: none;
  }
  
  .payment-method-info {
    display: flex;
    align-items: center;
  }
  
  .payment-method-name {
    font-size: 30rpx;
    color: #333;
  }
  
  .payment-method-item.active {
    background-color: #f9f9f9;
  }
  
  /* 底部支付按钮 */
  .payment-bar {
    position: fixed;
    left: 20rpx;
    right: 20rpx;
    bottom: 20rpx;
    height: 96rpx;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    z-index: 90;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    border-radius: 48rpx;
    overflow: visible;
  }
  
  .payment-info {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 40rpx;
  }
  
  .payment-total {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .payment-action {
    height: 100%;
    padding: 0 40rpx;
    background-color: vars.$primary-color;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 48rpx 48rpx 0;
    
    text {
      color: #fff;
      font-size: 30rpx;
      font-weight: 500;
    }
  }
  </style>